<template>
  <div
    class="menu-item"
    :class="{ 'select-tab': selectTabId === data.tabId }"
    @click="clickMenuHandler(data)"
  >
    <!-- <template v-if="!!data.icon">
      <img class="menu-item-icon" :src="selectTabId === data.tabId ? data.iconSelect : data.icon" alt="" />
    </template>
    <template v-else>
      <div class="menu-icon-box">
        <span class="iconfont icon-layer pick-menu-icon"></span>
      </div>
    </template>
    <p>{{ data.tabName }}</p> -->
  </div>
</template>

<script>
export default {
  name: 'TabItem'
};
</script>
<script setup>
// import { inject, defineProps, computed } from 'vue';
// const props = defineProps({
//   data: {
//     type: Object,
//   },
// });
// const selectTabId = inject('selectTabId');
// const clickMenuHandler = inject('clickMenuHandler');
// const iconHover = computed(() => {
//   if (props.data?.iconHover) {
//     return `url(${props.data?.iconHover})`;
//   } else {
//     return `url()`;
//   }
// });
</script>

<style lang="less" scoped>
// .menu-icon-box {
//   width: 40px;
//   height: 40px;
//   background: #f5f6f7;
//   border-radius: 10px;
//   margin-bottom: 4px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   .pick-menu-icon {
//     font-size: 24px;
//     color: #8e959f;
//   }
// }
// .select-tab {
//   color: var(--tj-primary-color) !important;
//   .pick-menu-icon {
//     color: var(--tj-primary-color) !important;
//   }
// }
// .menu-item {
//   min-width: 85px;
//   cursor: pointer;
//   text-align: center;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   &:hover {
//     color: var(--tj-primary-color-4) !important;
//     .pick-menu-icon {
//       color: var(--tj-primary-color-4) !important;
//     }
//     .menu-item-icon {
//       content: v-bind(iconHover);
//     }
//   }
//   .menu-item-icon {
//     width: 40px;
//     height: 40px;
//     background: #f5f6f7;
//     border-radius: 10px;
//     margin-bottom: 4px;
//   }
// }
</style>
